<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>登录</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <script src="/web/js/sha256.min.js"></script>
    <script defer src="/web/js/alpinejs@3.14.1.min.js"></script>
    <link rel="stylesheet" href="/web/css/bootstrap@5.3.3.min.css" />
    <style>
      /* 隐藏密码框的清除与显示按钮 */
      input[type="password"]::-ms-clear,
      ::-ms-reveal {
        display: none;
      }
    </style>
    <script>
      function sha256(message) {
        return CryptoJS.SHA256(message).toString(CryptoJS.enc.Hex);
      }
    </script>
  </head>

  <body>
    <div class="container vh-100">
      <div class="row justify-content-sm-center align-items-center vh-100">
        <div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
          <div class="card shadow-lg">
            <div class="card-body p-5">
              <h1 class="fs-4 card-title fw-bold mb-4">登录</h1>
              <form
                x-data="formData()"
                @submit.prevent="submit($el)"
                autocomplete="off"
                novalidate
              >
                <!-- 账号 -->
                <div class="mb-3">
                  <label class="mb-2 text-muted">账号</label>
                  <input
                    type="text"
                    name="account"
                    x-model="account"
                    x-init="
                      account_msg=$el.validationMessage;
                      $watch('account_msg', msg=>{$el.setCustomValidity(msg)});"
                    @keypress="if(/[^\d]/.test($event.key)){$event.preventDefault()}"
                    @input="
                      $el.setCustomValidity('');
                      if (!$el.checkValidity() && !$el.validity.valueMissing) {
                        account_msg='请输入8位数字';
                        return;
                      }
                      account_msg=$el.validationMessage;"
                    class="form-control"
                    minlength="8"
                    maxlength="8"
                    pattern="\d{8}"
                    tabindex="1"
                    required
                    autofocus
                  />
                  <ul class="invalid-feedback">
                    <li x-text="account_msg"></li>
                  </ul>
                </div>
                <!-- 密码 -->
                <div class="mb-3" x-data="{ input_type:'password' }">
                  <div class="mb-2 w-100" style="user-select: none">
                    <label class="text-muted">密码</label>
                    <img
                      class="m-auto"
                      height="16"
                      width="16"
                      style="cursor: pointer"
                      :src="input_type=='text'?'./img/eye.svg':'./img/eye-slash.svg'"
                      @click="input_type=input_type=='text'?'password':'text'"
                    />
                    <a href="forgot.html" class="float-end text-reset">
                      忘记密码？
                    </a>
                  </div>
                  <input
                    name="password"
                    :type="input_type"
                    x-model="password"
                    x-init="
                      password_msg=$el.validationMessage;
                      $watch('password_msg', msg=>{$el.setCustomValidity(msg)});"
                    @input="
                      $el.setCustomValidity('');
                      password_msg=$el.validationMessage;"
                    class="form-control"
                    tabindex="2"
                    required
                  />
                  <ul class="invalid-feedback">
                    <li x-text="password_msg"></li>
                  </ul>
                </div>
                <!-- 登录 -->
                <div class="d-flex align-items-center">
                  <div>
                    <input
                      id="remember"
                      name="remember"
                      type="checkbox"
                      class="form-input"
                      tabindex="3"
                    />
                    <label for="remember" class="form-label">记住我</label>
                  </div>
                  <button
                    type="submit"
                    class="btn btn-primary ms-auto"
                    tabindex="4"
                  >
                    登录
                  </button>
                </div>
              </form>
            </div>
            <!-- 注册 -->
            <div class="card-footer py-3 border-0">
              <div class="text-center">
                还没有账号？ <a href="register.html" class="text-dark">注册</a>
              </div>
            </div>
          </div>
          <div class="text-center mt-5 text-muted">
            Copyright &copy; 2024-2024 &mdash;
          </div>
        </div>
      </div>
    </div>

    <script>
      function formData() {
        return {
          account_msg: "",
          password_msg: "",
          account: "",
          password: "",
          async submit(form, $dispatch) {
            if (!form.checkValidity()) {
              // 输入验证失败
              form.classList.add("was-validated");
              return;
            }
            const hash = sha256(this.account + this.password);
            const passwordHash = sha256(this.account + hash);
            try {
              const response = await fetch("/api/v1/login", {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({
                  account: Number(this.account),
                  password: passwordHash,
                }),
              });
              const data = await response.json();
              if (data.msg !== "") {
                alert(data.msg);
              }
            } catch (error) {
              console.error(error.message);
              alert(error.message);
            }
          },
        };
      }
    </script>
  </body>
</html>
